<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="css.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
</head>
<body>
<div class="box">
    <header>

        <div class="logo">
            <img src="imges/logo.png">
        </div>

        <div class="type">
            <input type="text" placeholder="搜索商品名称">
        </div>

        <div class="user">
            <img src="imges/user.png">
        </div>
    </header>

    <div class="list">
        <ul>
            <li>推荐</li>
            <li>手机</li>
            <li>智能</li>
            <li>电视</li>
            <li>笔记本</li>
            <li>家电</li>
            <li>生活周边</li>
        </ul>
    </div>
<!--头部-->


    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img width="100%" src="imges/banner1.jpg"></div>
            <div class="swiper-slide"><img width="100%" src="imges/banner2.jpg"></div>
            <div class="swiper-slide"><img width="100%" src="imges/banner3.jpg"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <!--    <div class="swiper-button-prev"></div>-->
        <!--    <div class="swiper-button-next"></div>-->

        <!-- 如果需要滚动条 -->
        <!--    <div class="swiper-scrollbar"></div>-->
    </div>
    <!--导航等组件可以放在container之外-->

<!--   轮播图结束-->



    <div class="icon">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>


    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>

    <div class="data-1">
        <div></div>
        <div></div>
        <div></div>
    </div>
<!--第一块-->
    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>

    <div class="data-2">

    </div>
<!--第二块-->
    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>

    <div class="data-3">

    </div>
<!--第三块-->

    <div class="data-4">
        
        <div>
            <img src="imges/list-1-1.png">
            <ul>
                <li>小米10 Pro</li>
                <li>晓龙865 / 50倍变焦</li>
                <li>￥<span>4999</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>
        
        <div>
            <img src="imges/list-1-2.png">
            <ul>
                <li>小米10</li>
                <li>晓龙865/1亿像素相机</li>
                <li>￥<span>3799</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>

        <div>
            <img src="imges/list-1-3.png">
            <ul>
                <li>Redmi K30 4G</li>
                <li>120Hz流速屏，全速热爱</li>
                <li>￥<span>1399</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>

        <div>
            <img src="imges/list-1-4.png">
            <ul>
                <li>Redmi K30 5G</li>
                <li>双模5G，120Hz流速屏</li>
                <li>￥<span>1699</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>

        <div>
            <img src="imges/list-1-5.png">
            <ul>
                <li>Redmi Note 8 Por</li>
                <li>6400万全场景四摄</li>
                <li>￥<span>1099</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>

        <div>
            <img src="imges/list-1-6.png">
            <ul>
                <li>Redmi Note 8</li>
                <li>千元4800万四摄</li>
                <li>￥<span>899</span>起</li>
                <li><button>立即购买</button></li>
            </ul>
        </div>
    </div>
<!--第一个list结束-->

    <div class="more">
        更多小米手机产品 >
    </div>

    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>


    <div class="data-5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
<!--    第二个list-->
    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>


    <div class="data-6">

    </div>

    <div class="divider_line" index="3" style="height: .5rem; border-bottom: 0.16rem solid rgb(245, 245, 245); background-color: rgb(245, 245, 245);"></div>

    <div class="data-7">

    </div>




    <footer>
        <div class="foot">
            <div>
                <img src="imges/home.png">
                <span>首页</span>
            </div>

            <div>
                <img src="imges/fl.png">
                <span>分类</span>
            </div>

            <div>
                <img src="imges/xq.png">
                <span>星球</span>
            </div>

            <div>
                <img src="imges/gwc.png">
                <span>购物车</span>
            </div>

            <div>
                <img src="imges/user.png">
                <span>我的</span>
            </div>
        </div>
    </footer>

</div>
</body>
<script src="js.js"></script>
</html>